<template>
  <div class="container">
    <div class="cardcoupon" :style="{padding:(type==1?12:8)+'px'}">
      <!-- 卡 -->
      <card v-if="type==1" :data="obj"></card>
      <!-- 券 -->
      <coupon v-if="type==2" :data="obj" :isTransSale="true"></coupon>
    </div>
    <!-- 公共部分 -->
    <div class="splitline">
      <img v-if="ossUrl" :src="ossUrl+'/mp_3.2.4/splitline.png'" alt />
    </div>
    <!-- 卡/券转让 - 卡/券挂售 -->
    <div class="detailinfo">
      <div class="flexline">
        <div class="lf">您绑定的手机号</div>
        <div class="rt">{{userTel}}</div>
      </div>
      <div class="flexline codebox">
        <div class="lf">验证码</div>
        <div class="rt">
          <input
            type="number"
            v-model="code"
            maxlength="6"
            placeholder="请输入验证码"
            placeholder-style="color:#CCCCCC"
          />
          <span class="yzbtn" @click="getCode()">{{text}}</span>
        </div>
      </div>
      <!-- 卡/券转让专有 -->
      <div class="flexline" v-if="orderType==1">
        <div class="lf">转让人手机号</div>
        <div class="rt">
          <input
            type="number"
            v-model="transTel"
            maxlength="11"
            placeholder="请输入转让人手机号"
            placeholder-style="color:#CCCCCC"
          />
        </div>
      </div>
      <!-- 卡/券挂售专有 -->
      <div class="flexline" v-if="orderType==2">
        <div class="salelf">
          <div class="top">挂售金额</div>
          <div class="bottom">市场建议挂售价：{{min_sale_price}}-{{max_sale_price}}</div>
        </div>
        <div class="rt salert">
          <input
            type="digit"
            v-model="sale_price"
            placeholder="请输入金额"
            placeholder-style="color:#CCCCCC"
          />
        </div>
      </div>
    </div>
    <!-- 卡/券转让专有 -->
    <div class="tip" v-if="orderType==1">*卡券使用后将不再进行转让</div>
    <!-- 底部 转让/挂售切换-->
    <div class="footer" :style="{height:(iPhoneX?196:136)+'rpx'}">
      <div class="buy" @click="submit">立即{{orderType==1?'转让':'挂售'}}</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import card from "@/components/card/index";
import coupon from "@/components/coupon/index";
export default {
  components: {
    card,
    coupon
  },
  data() {
    return {
      ossUrl: common.image_resource, //oss图片
      imgUrl: common.image_response, //http图片
      iPhoneX: false, //是否是iPhoneX
      text: "获取验证码",
      djs: 60, // 倒计时
      timer: "", // 计时器
      obj: {}, //传入组件数据
      orderType: "", //订单类型1 转让 2 挂售
      id: "", //卡或券id 1792374 12 1
      type: "", //1卡 2券
      mobile: "", //绑定电话
      userTel: "", //实际展示电话
      code: "", //验证码
      transTel: "", //转让人手机号
      sale_price: "", //挂售金额
      min_sale_price: "", //市场建议售价
      max_sale_price: "" //市场建议售价
    };
  },
  onLoad(options) {
    // 获取传递参数
    this.orderType = options.orderType || "";
    this.type = options.type || "";
    this.id = options.id || "";
    let title;
    if (this.orderType == 1) {
      //转让
      title = this.type == 1 ? "卡转让" : "券转让";
    } else {
      //挂售
      title = this.type == 1 ? "卡挂售" : "券挂售";
    }
    // 设置导航栏标题
    wx.setNavigationBarTitle({
      title: title
    });
    //获取系统信息
    let that = this;
    wx.getSystemInfo({
      success: res => {
        this.windowWidth = res.windowWidth;
        if (res.model.search("iPhone X") != -1) {
          that.iPhoneX = true;
        }
      }
    });
    // 初始化数据
    clearInterval(this.timer);
    this.djs = 60;
    this.text = "获取验证码";
    this.sale_price = "";
    this.code = "";
    this.transTel = "";
    // 获取页面信息
    if (this.id && this.type) {
      this.getInfo();
    }
  },
  destoryed() {
    clearInterval(this.timer);
    this.djs = 60;
    this.text = "获取验证码";
  },
  methods: {
    //   获取卡/券确认信息
    getInfo() {
      common.mmk_Loading(0);
      let url =
        (this.orderType == 1 && "api/v4_5/c2c/card_change") ||
        (this.orderType == 2 && "api/v4_5/c2c/hangon_detail") ||
        "";
      common.fly_post(
        url,
        {
          id: this.id,
          type: this.type
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            let data = res.data;
            this.obj = {
              sign: data.prefix || "",
              name: data.name || "",
              desc: data.describe || "",
              price: data.price || 0,
              goods_image:data.style_pic,
              start_time:
                (data.start_time &&
                  new Date(data.start_time * 1000).Format("yyyy.MM.dd")) ||
                "",
              end_time:
                (data.end_time &&
                  new Date(data.end_time * 1000).Format("yyyy.MM.dd")) ||
                ""
            };
            this.mobile = data.mobile || "";
            this.userTel =
              (this.mobile &&
                this.mobile.substr(0, 3) + "****" + this.mobile.substr(7)) ||
              "";
            this.min_sale_price = data.min_sale_price || 0;
            this.max_sale_price = data.max_sale_price || 0;
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 获取验证码
    getCode() {
      if (this.djs != 60) {
        return;
      }
      common.mmk_Loading(0);
      var that = this;
      clearInterval(this.timer);
      //type 1115:卡券转让 1116:卡券挂售 1117:零钱转让(陈畅加的参数，有问题找cc)
      common.fly_post(
        "api/v4_5/order_gold/sms_code",
        {
          type: this.orderType == 1 ? 1115 : 1116
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "获取短信成功，请注意查收");
            this.timer = setInterval(() => {
              that.djs--;
              that.text = that.djs + "s后重新发送";
              if (that.djs <= 0) {
                that.text = "获取验证码";
                clearInterval(that.timer);
                that.djs = 60;
              }
            }, 1000);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 立即转让/挂售
    submit() {
      if (!this.code) {
        common.mmk_Loading(2, "请输入验证码");
        return;
      }
      if (this.orderType == 1 && !this.transTel) {
        common.mmk_Loading(2, "请输入转让人手机号");
        return;
      }
      if (this.orderType == 2 && !this.sale_price) {
        common.mmk_Loading(2, "请输入金额");
        return;
      }
      common.mmk_Loading(0);
      let url =
        (this.orderType == 1 && "api/v4_5/c2c/card_change_submit") ||
        (this.orderType == 2 && "api/v4_5/c2c/hangon") ||
        "";
      let params =
        this.orderType == 1
          ? {
              id: this.id,
              type: this.type,
              code: this.code,
              mobile: this.transTel
            }
          : {
              opt: 1, //操作类型1挂售 2取消挂售
              type: this.type,
              id: this.id,
              mobile: this.mobile,
              code: this.code,
              sale_price: this.sale_price
            };
      common.fly_post(url, params, response => {
        common.mmk_Loading(1);
        let res = response.data;
        if (res.status_code == 0) {
          this.dealJump();
        } else {
          common.mmk_Loading(2, res.message);
        }
      });
    },
    // 成功后跳转
    dealJump() {
      if (this.orderType == 1) {
        //转让
        wx.showToast({
          title: "转让成功",
          icon: "success",
          duration: 2000,
          success: function() {
            setTimeout(() => {
              wx.navigateBack({
                delta: 1
              });
            }, 2000);
          }
        });
      } else if (this.orderType == 2) {
        //挂售->挂售确认页
        wx.redirectTo({
          url: `/pages/ct_store/putsale_confirm/main?type=${this.type}`
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  box-sizing: border-box;
  .cardcoupon {
    padding: 12px;
    background: rgba(255, 255, 255, 1);
    box-sizing: border-box;
  }
  .splitline {
    width: 100%;
    height: 4px;
    line-height: 4px;
    margin: 3px auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .detailinfo {
    background: rgba(255, 255, 255, 1);
    padding-left: 15px;
    box-sizing: border-box;
    .flexline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 15px 18px 0;
      border-bottom: 1px solid #f3f4f6;
      box-sizing: border-box;
      .lf {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
      }
      .salelf {
        box-sizing: border-box;
        .top {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          margin-bottom: 14px;
        }
        .bottom {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 20px;
        }
      }
      .rt {
        width: 60%;
        text-align: right;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
      }
      .salert {
        width: 40%;
      }
      &.codebox {
        padding: 15px 15px 15px 0;
        .rt {
          width: 80%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          box-sizing: border-box;
          input {
            width: 46%;
            margin-right: 20px;
          }
          .yzbtn {
            border-radius: 5px;
            border: 1px solid rgba(255, 115, 164, 1);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 115, 164, 1);
            line-height: 20px;
            padding: 3px 4px;
            white-space: nowrap;
            box-sizing: border-box;
          }
        }
      }
      &:last-child {
        border-bottom: 0;
      }
    }
  }
  .tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(253, 148, 108, 1);
    line-height: 20px;
    padding: 20px 15px;
  }
  .footer {
    width: 100%;
    height: 53px;
    padding: 0 20px;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    .buy {
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 100px;
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      padding: 9px 0;
      box-sizing: border-box;
    }
  }
}
</style>